<template>
  <div class="server">
    <div class="padding-l jcsb">
      <div></div>
      <div>
        <el-button type="primary" @click="dialogVisible = true">报修</el-button>
      </div>
    </div>
    <div class="width-max p3 text-center size-xl" v-if="!repair_list">
      暂无报修记录
      {{repair_list}}
    </div>
    <el-table v-if="repair_list" :data="repair_list" style="width: 100%;text-align: center;">
      <el-table-column prop="uno" label="用户名" width="80">
      </el-table-column>
      <el-table-column prop="rno" label="房间号" width="80">
      </el-table-column>
      <el-table-column prop="question_dsc" label="问题描述">
      </el-table-column>
      <el-table-column prop="is_deal_now" label="是否立即处理">
      </el-table-column>
      <el-table-column prop="user_expect_start_time" label="期望开始维修日期">
      </el-table-column>
      <el-table-column prop="user_expect_end_time" label="期望维修结束时间">
      </el-table-column>
      <el-table-column prop="is_cancel" label="是否取消">
      </el-table-column>
      <el-table-column prop="status" label="维修状态">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" v-if="scope.row.status=='未维修'&&scope.row.is_cancel=='否'" size="mini"
            @click="user_qx_server(scope.row.id)">取消维修
          </el-button>
          <el-button v-if="scope.row.status!='未维修' || scope.row.is_cancel=='是'" size="mini">无法取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="报修" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="repair_dict" label-width="80px">
        <el-form-item label="房间号">
          <el-input v-model="repair_dict.rno"></el-input>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input type="textarea" v-model="repair_dict.question_dsc"></el-input>
        </el-form-item>
        <el-form-item label="是否需要立即处理">
          <el-switch v-model="delivery"></el-switch>
        </el-form-item>
        <el-form-item label="期望处理时间" v-if="!delivery">
          <el-col :span="11">
            <el-date-picker v-model="repair_dict.user_expect_start_time" type="datetime" placeholder="选择日期时间"
              default-time="12:00:00">
            </el-date-picker>
            <!-- <el-date-picker type="datetimerange" placeholder="选择开始日期" format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd" v-model="repair_dict.user_expect_start_time" style="width: 100%;">
            </el-date-picker> -->
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker v-model="repair_dict.user_expect_end_time" type="datetime" placeholder="选择日期时间"
              default-time="12:00:00">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="need_pepair_po()">立即报修</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        dialogVisible: false,
        repair_list: null,
        delivery: true,
        repair_dict: {
          "rno": 105, //房间编号
          "question_dsc": "下水道坏了", //问题描述
          "is_deal_now": "是", //是否立即处理
          "user_expect_start_time": "", // 用户期望维修开始时间
          "user_expect_end_time": "", // 用户期望维修结束时间
        }
      }
    },
    watch: {
      delivery: function() {
        if (this.delivery) {
          this.repair_dict.is_deal_now = '是'
        } else {
          this.repair_dict.is_deal_now = '否'
        }
      }
    },
    mounted() {
      this.need_pepair()
    },
    methods: {
      onSubmit() {
        console.log(this.repair_dict);
      },
      // 日期转字符串
      date_to_str(date2) {
        let date = new Date(date2), //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          Y = date.getFullYear() + '',
          M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
          D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()),
          h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()),
          m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()),
          s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
        return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
      },
      // 报修
      need_pepair_po() {
        if (!this.delivery) {
          this.repair_dict.user_expect_end_time = this.date_to_str(this.repair_dict.user_expect_end_time)
          this.repair_dict.user_expect_start_time = this.date_to_str(this.repair_dict.user_expect_start_time)
        }
        let that = this
        let request_url = this.getAjaxUrl() + '/api/user/need_repair';
        let ajax_dict = {
          method: "POST",
          url: request_url,
          data: this.repair_dict,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            that.$message({
              message: '取消成功',
              type: 'success'
            });
            that.need_pepair()
            that.dialogVisible = false
            console.log(res);
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
          });
      },
      // 查询维修记录
      need_pepair() {
        let that = this
        let request_url = this.getAjaxUrl() + '/api/user/need_repair?current=1&size=1000';
        let ajax_dict = {
          method: "GET",
          url: request_url,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            that.repair_list = res.data.infos
            console.log(res.data);
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      // 用户取消维修
      user_qx_server(item) {
        console.log(item)
        let that = this
        let request_url = this.getAjaxUrl() + '/api/user/need_repair';
        let ajax_dict = {
          method: "PATCH",
          url: request_url,
          // primary: {
          //   "id": item.id
          // },
          data: {
            id: item
          },
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            that.$message({
              message: '取消成功',
              type: 'success'
            });
            that.need_pepair()
            console.log(res.data);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
